<!--
 * @LastEditors: 李炘徽
 * @LastEditTime: 2022-06-28 17:15:42
-->
<template>
  <div class="realTime">
    <!-- 城市对比折线图 -->
    <!-- calc 在css中如果要有一些运算的处理 放在calc表达式中 -->
    <!-- vh 视窗的高度 -->
    <div id="container" style="height: calc(100vh / 2)"></div>
    <!-- 实施滚动的折线图 -->
    <div id="realtime_container" style="height: calc(100vh / 2)"></div>
    <!-- 实时疫情 -->
  </div>
</template>

<script>
export default {
  mounted() {
    var chart = Highcharts.chart("container", {
      chart: {
        type: "line",
      },
      title: {
        text: "城市疫情数据对比",
      },
      subtitle: {
        text: "数据来源: 广西科技大学",
      },
      xAxis: {
        categories: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
      yAxis: {
        title: {
          text: "数量(个)",
        },
      },
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          // enableMouseTracking: false
        },
      },
      // 提示框
      tooltip: {
        headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
        pointFormat:
          '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
        shared: true,
      },
      series: [
        {
          name: "新增",
          data: [
            7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9,
          ],
        },
        {
          name: "治愈",
          data: [
            3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4,
          ],
        },
      ],
    });
    
    //实时更新的折线图
    Highcharts.setOptions({
      global: {
        useUTC: false,
      },
    });
    function activeLastPointToolip(chart) {
      var points = chart.series[0].points;
      chart.tooltip.refresh(points[points.length - 1]);
    }
    var chart = Highcharts.chart("realtime_container", {
      chart: {
        type: "spline",
        marginRight: 10,
        events: {
          load: function () {
            var series = this.series[0],
              chart = this;
            activeLastPointToolip(chart);
            setInterval(function () {
              var x = new Date().getTime(), // 当前时间
              y = Math.random(); // 随机值
              series.addPoint([x, y], true, true);
              activeLastPointToolip(chart);
            }, 1000);
          },
        },
      },
      title: {
        text: "疫情实时更新数据",
      },
      subtitle: {
        text: "数据来源: www.baidu.com",
      },
      xAxis: {
        type: "datetime",
        tickPixelInterval: 150,
      },
      yAxis: {
        title: {
          text: null,
        },
      },
      tooltip: {
        formatter: function () {
          return (
            "<b>" +
            this.series.name +
            "</b><br/>" +
            Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
            "<br/>" +
            Highcharts.numberFormat(this.y, 2)
          );
        },
      },
      legend: {
        enabled: false,
      },
      series: [
        {
          name: "实时数据",
          data: (function () {
            // 生成随机值
            var data = [],
              time = new Date().getTime(),
              i;
            for (i = -19; i <= 0; i += 1) {
              data.push({
                x: time + i * 1000,
                y: Math.random(),
              });
            }
            return data;
          })(),
        },
      ],
    });
  },
};
</script>

<style scoped>
</style>
